<template>
    <div id="box">
        <router-link to="/Login">
          <img src="../assets/img/left.png" alt="" class="retu">
        </router-link>
        <div class="regbox">
            <h4>请以以下方式注册</h4>
        <form class="form-horizontal">            
            <div class="form-group">
                <img src="../assets/img/user.png" alt="" class="username">
                <div class="col-sm-10">
                <input type="text" class="usertext" id="inputUser" placeholder="用户名" v-model="name" @blur="user">
                </div>
            </div>          
            <div class="form-group">
                <img src="../assets/img/user.png" alt="" class="user">
                <div class="col-sm-10">
                <input type="number" class="phonenum" id="inputNum" placeholder="手机号" v-model="phonenumber" @blur="phone">
                </div>
            </div>
            <div class="form-group">
                <img src="../assets/img/pass.png" alt="" class="passimg">
                <div class="col-sm-10">
                <input type="password" class="form-control pass" id="inputPassword3" placeholder="密码" v-model="pass" @blur="password">
                </div>
            </div>
            <div class="form-group">
                <img src="../assets/img/pass.png" alt="" class="repassimg" >
                <div class="col-sm-10">
                <input type="password" class="form-control repass" id="inputPassword3" placeholder="确认密码" v-model="confirmpass" @blur="confirm">
                </div>
            </div>
            <div class="form-group regbbtbox">
                <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="regbut" @click="regSave">注册</button>
                </div>
            </div>
        </form>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  name: "Reg",
  data() {
    return {
      name:"",
      phonenumber: "",
      pass: "",
      confirmpass: ""
    };
  },
  methods: {
    regSave() {
      let confirm = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (
        this.name !=""&&
        this.phonenumber != "" &&
        this.pass != "" &&
        this.confirmpass != "" &&
        confirm.test(this.phonenumber) &&
        this.pass == this.confirmpass &&
        this.pass.length > 6
      ) {
        axios({
          url: "/users",
          method: "post",
          data: `name=${this.name}&phonenumber=${this.phonenumber}&pass=${this.pass}`,
          // baseURL: "http://8c6bh7.natappfree.cc/"
        }).then(res => {
          console.log(res.data);
          Toast.success("注册成功");
          this.$router.push({
            path: "/Login"
          });
        });
      } else {
        Toast.fail("请重新输入");
      }
    },
    phone() {
      let confirm = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (this.phonenumber == "" || !confirm.test(this.phonenumber)) {
        Toast.fail("手机号错误");
      }
    },
    confirm() {
      if (this.confirmpass == "" || this.pass != this.confirmpass) {
        Toast.fail("确认密码错误");
      }
    },
    password() {
      if (this.pass.length < 6) {
        Toast.fail("密码少于6位");
      }
    },
    user(){
      if(this.name.length >=10){
        Toast.fail("用户名不能大于10位");
      }
    }
  }
};
</script>

<style scoped>
@import url("/css/bootstrap.css");
#box {
  font-size: 0.1rem;
}
.retu {
  margin-top: 0.16rem;
  margin-left: 0.16rem;
  height: 0.14rem;
}
h4 {
  color: #aaa;
  font-size: 0.18rem;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.regbox {
  width: 80%;
  height: 56%;
  margin: 0.17rem auto;
}
.user,.username {
  position: absolute;
  left: 10%;
  top: 29%;
}
.passimg {
  position: absolute;
  left: 10%;
  top: 29%;
}
.user,.username
.passimg,
.repass {
  font-size: 0.13rem;
}
.repassimg {
  position: absolute;
  left: 10%;
  top: 29%;
}
.form-horizontal,
.form-group {
  width: 100%;
  margin-bottom: 0.2rem;
  position: relative;
}
input {
  width: 74%;
  height: 0.41rem;
  border: none;
  outline: none;
  background-color: #ffe5ee;
  color: #aaa;
}
/* .phonenum {
  background-image: url(/img/user.png);
} */
.phonenum,
.pass,
.repass,.usertext {
  padding-left: 0.6rem;
  padding-right: 0.25rem;
}
::placeholder {
  text-indent: 0.35rem;
  font-size: 0.13rem;
  color: #bbb;
}
.regbbtbox {
  width: 40%;
  margin: auto;
}
.regbut {
  width: 100%;
  height: 0.3rem;
  border: none;
  text-align: center;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, #ffe5ee, #ff0066);
  color: #fff;
}
</style>

